<section class="comment-item__header">
  <div class="comment-item__meta">
    <h5 class="comment-item__author">
      {{comment.authorName}}
    </h5>

    <h6 class="comment-item__creation">
      {{moment-from-now comment.modified}}
    </h6>
  </div>

  <aside class="comment-item__type" title="Comment Type">
    {{lowercase comment.type}}
  </aside>
</section>

{{#if isEditing}}

  <form {{action "updateComment" on="submit"}}>
    {{medium-editor
      comment.text
      options=editorOptions
      class="comment-new__content"
      onChange=(action (mut comment.text))
      }}

    <div class="comment-new__actions">
      <button
        type="reset"
        class="nacho-button--large nacho-button--tertiary"
        {{action "onCancel"}}>
        <span aria-hidden="true">&times;</span>
        Cancel
      </button>

      <button
        type="submit"
        class="nacho-button--large nacho-button--secondary">
        Update Comment
      </button>
    </div>
  </form>

{{else}}

  {{yield}}

{{/if}}

<section class="comment-item__actions">
  {{#if (and comment.isAuthor (not isEditing))}}
    <button
      class="nacho-button nacho-button--small nacho-button--tertiary"
      title="Edit this comment"
      {{action "onEdit"}}>

      <i class="fa fa-pencil"
         aria-label="Edit this comment"></i>

    </button>

    <button
      class="nacho-button nacho-button--small nacho-button--tertiary"
      title="Delete this comment"
      {{action "onDelete"}}>

      <i class="fa fa-trash"
         aria-label="Delete this comment"></i>

    </button>
  {{/if}}
</section>
